<template>
  <div>
    <slide-verify
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="text"
      ></slide-verify>
<div>{{msg}}</div>
  </div>
</template>

<script>
/**
 *:l="42" 滑块边长
  :r="10" 滑块突出圆的半径
  :w="310"canvas画布的宽
  :h="155"canvas画布的高
  @success="onSuccess"成功回调
  @fail="onFail"失败回调
  @refresh="onRefresh"刷新
  :slider-text="text"滑动底纹的文字
 */
export default {
  data() {
    return {
      msg: "",
      text: "向右滑"
    }
  },
  methods: {
    onSuccess() {
      this.msg = "成功"
    },
    onFail() {
      this.msg = ""
    },
    onRefresh() {
      this.msg = ""
    }
  }
}
</script>

<style>

</style>